上一篇:https://ithelp.ithome.com.tw/articles/10195551
學習網頁:https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
https://www.w3schools.com/bootstrap/bootstrap_grid_stacked_to_horizontal.asp
總計3篇:
1.https://ithelp.ithome.com.tw/articles/10195551
2.https://ithelp.ithome.com.tw/articles/10195875
3.https://ithelp.ithome.com.tw/articles/10196050

前一篇有提到4種螢幕類型，這表有更詳細的說明
Grid behaviour 網格的運作模式:

• .col-xs-(Extra small)是最小的，用這個設定的話不論螢幕多小，都會依比例水平放置所有內容(因為是最小的了。
• .col-sm-(Small)以上。在螢幕寬>=768px時會呈你自訂的span比例縮放，小於這值時就會自動疊起來。其他2個可以依此類推。(請對著以上表單看)
• .col-md-(Medium) 螢幕寬>=992px時有效縮放
• .col-lg-(Large) 螢幕寬>=1200px時有效縮放

程式碼:

<div class="container">
  <h1>Grid</h1>
  <p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>      
  <p>Resize the browser window to see the effect.</p>      
  <div class="row">
  
  
    <div class="col-sm-1" style="background-color:yellow;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
    </div>
    
    <div class="col-sm-1" style="background-color:yellow;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-1" style="background-color:pink;">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
    </div>
    
  </div>
</div>

試試看在"body"標籤裡加這段，記得要先引入bootstrap相關文件
(傳送門)。

圖示效果:
注意看寬度的改變，這邊用的是.col-sm-，所以有效寬度為768px，寬度高於這個時就會有比例縮放的效果了。這邊用的比例是1:9:1:1來分割文章。768時有效，掉到767寬時就疊在一起了。

container和container-fluid的差別
記得上一篇講過的基本結構container包row，row在包col-*-*吧?
container還有另一個class屬性叫"container-fluid"。
使用container的話最大所有元素寬會對應

• Extra small:None(不受限)
• Small:750px
• Medium:970px
• Large:1170px
  如果你螢幕比這設定值還大的話，兩側"可能"會出現過多空白部分(通常只有一點點)。
  如果你想要你的內容能完全用到螢幕寬的話，class定為"container-fluid"就能完全展開了。

看來2篇不夠用(廢話太多0.0?)，明天在接續吧